<template>
    <el-dialog
        draggable
        v-model="isShow"
        title="用户列表"
        width="800"
        overflow
        :close-on-click-modal="false"
    >
        <div class="dialogContent">
            <el-button
                size="small"
                type="primary"
                plain
                @click="handleTaggle('common')"
                >普通用户</el-button
            >
            <el-button
                size="small"
                type="primary"
                plain
                @click="handleTaggle('traffic')"
                >交通管理员</el-button
            >
            <el-button
                size="small"
                type="primary"
                plain
                @click="handleTaggle('admin')"
                >超级管理员</el-button
            >
            <!-- 模糊查询 -->
            <el-input
                v-model.lazy="searchValue"
                @change="handleSearch"
                placeholder="请输入用户名"
                clearable
                style="margin: 0 40px; width: 200px"
            />
            <!-- 刷新 -->
            <el-button plain @click="handkeRefresh">
                <i class="iconfont icon-shuaxin"></i
            ></el-button>
            <el-button
                type="success"
                @click="isShowUserInfoDialog = true"
                v-if="currentUserType !== 'common'"
                >新增</el-button
            >
        </div>
        <user-list-table :data="renderTableData" :syncUserData="syncUserData" />

        <template #footer>
            <!-- 分页器 -->
            <el-pagination
                size="small"
                background
                layout="prev, pager, next"
                :total="renderTableData.length"
                :page-size="limit"
                @current-change="handleCurrentChange"
            />
            <div class="dialog-footer">
                <el-button @click="isShow = false">取消</el-button>
                <el-button type="primary" @click="isShow = false">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <user-info-dialog
        v-model="isShowUserInfoDialog"
        :isEdit="false"
        :handleSubmit="handleAddUser"
    />
</template>

<script setup>
import { computed, onActivated, onMounted, onUnmounted, ref } from "vue";
import { getUserInfoHttp, registerHttp } from "@/request";
import UserListTable from "./UserListTable.vue";
import UserInfoDialog from "./UserInfoDialog.vue"; //用户信息弹框，用于新增用户
import { ElMessage } from "element-plus";
const isShow = ref(false);

//请求type 类型的数据并更新到allUserData中
const getAllUserData = (type) => {
    getUserInfoHttp(type).then((res) => {
        // console.log(res, "用户列表");
        const users = res.result.map((item) => {
            return {
                username: item.username,
                password: item.password,
                type: item.type,
                isOnline: item.isOnline,
            };
        });
        //拼接数据
        allUserData.value = allUserData.value.concat(users);
    });
};
//同步后台的用户数据
const syncUserData = () => {
    allUserData.value = [];
    getAllUserData("admin");
    getAllUserData("traffic");
    getAllUserData("common");
};

//切换用户类型
const handleTaggle = (type) => {
    currentUserType.value = type;
};

//打开弹窗
const handleOpen = () => {
    isShow.value = true;
    //同步后台数据
    syncUserData();
};
//开启弹窗，在父组件中使用打开
defineExpose({
    handleOpen,
});

//所有用户列表
const allUserData = ref([]);
//当前用户类型
const currentUserType = ref("common");
const searchValue = ref("");
const handleSearch = (value) => {
    searchValue.value = value;
};

const currentUserTypeLength = ref(0);
const limit = 6; //每页显示的条数
//分页器
const currrntPage = ref(1); //当前页码
const handleCurrentChange = (value) => {
    currrntPage.value = value;
};
//最终渲染的用户列表数据
const renderTableData = computed(() => {
    let result = allUserData.value.filter((item) => {
        return item.type === currentUserType.value;
    });
    //模糊查询
    if (searchValue.value) {
        result = result.filter((item) => {
            return item.username.includes(searchValue.value);
        });
    }
    //当前用户类型总数，用于分页器更新
    currentUserTypeLength.value = result.length;
    const startIndex = (currrntPage.value - 1) * limit;
    const endIndex = startIndex + limit;
    return result.slice(startIndex, endIndex);
});

//刷新模糊查询
const handkeRefresh = () => {
    searchValue.value = "";
};

//新增用户弹框功能
const isShowUserInfoDialog = ref(false);
const handleAddUser = async ({ username, password, type }) => {
    try {
        await registerHttp({ username, password, type });
        ElMessage.success("新增用户成功");
        //同步后台数据
        // syncUserData();
        isShowUserInfoDialog.value = false;
    } catch (error) {
        console.log(error);
        ElMessage.error("新增用户失败,请检查用户名是否重复");
    }
};
</script>

<style scoped>
.dialogContent {
    margin-bottom: 10px;
}
.dialogContent .el-button .icon-shuaxin {
    transition: all 0.5s ease-in-out;
}
.dialogContent .el-button:hover .icon-shuaxin {
    scale: 1.3;
    transform: rotate(-180deg);
}
</style>
